<template>
  <div style="height: 100%" class="main">
    <!-- <el-card :body-style="{ padding: '5px', margin: '0px'}" style="border-radius: 10px; margin-top: 80%;"> -->
    <div class="card">
      <div style=" text-align: center; user-select: none; margin-top: 8px;">
        <img src="../assets/logo2.jpg" style="height: 40%; width: 40%;" />
      </div>

      <el-form ref="loginData" :model="loginData" :rules="rules" style="margin-top: 30px;" label-width="100px">
        <el-form-item label="邮箱" prop="email">
          <!-- <el-col :span="16"> -->
          <el-input v-model="loginData.email" autocomplete="off" placeholder="请输入邮箱"></el-input>
          <!-- </el-col> -->
        </el-form-item>
        <el-form-item class="password" label="密码" prop="password">
          <el-input v-model="loginData.password" show-password placeholder="请输入密码" @keyup.enter.native="handleLogin">
          </el-input>
        </el-form-item>
        <el-form-item class="rememberMe">
          <el-checkbox v-model="rememberMe">记住我</el-checkbox>
        </el-form-item>
        <el-form-item prop="submit" style="top: 3px;">
          <el-button type="primary" @click="handleLogin"
            style="margin-right: 10px; width: 100px; margin-left: 40px; height:35px;">登录</el-button>
          <router-link class="list-group-item" active-class="active" to="/register">
            <el-button type="plain" style="margin-left: 10px; width: 100px; height: 35px;">注册</el-button>
          </router-link>
        </el-form-item>

      </el-form>
      <!-- </el-card> -->
    </div>
  </div>

</template>

<script>
import { login } from '@/API/user';
import { Message } from 'element-ui';
export default {
  data() {
    return {
      loginData: {
        email: '',
        password: ''
      },
      showPassword: 'password',
      rememberMe: false,

      rules: {
        email: [
          { pattern: /^[a-zA-Z0-9]+([-_.][A-Za-zd]+)*@([a-zA-Z0-9]+[-.])+[A-Za-zd]{2,5}$/, trigger: 'blur', message: '邮箱格式不正确' },
        ],
      }
    }
  },
  computed: {

  },
  methods: {
    handleLogin() {
      if (!this.loginData.email || !this.loginData.password) {
        Message({
          message: '邮箱或密码不能为空',
          type: 'error',
          customClass: 'message-global',
        });
        return;
      }
      login(this.loginData).then(res => {
        const result = res.data;
        if (result.code === 200) {
          Message({
            message: '登录成功',
            type: 'success',
            customClass: 'message-global',
          });
          this.$store.commit('login', {
            userInfo: result.data.user,
            follows: result.data.followedIds,
            token: result.data.token,
            remember: this.rememberMe
          });
          this.$router.push('/');
        } else {
          Message({
            message: result.msg,
            type: 'error',
            customClass: 'message-global',
          });
        }
      })
    },
    passwordDisplay() {
      this.showPassword = !this.showPassword
    },
    checkFormat() {

    }
  },
  beforeCreated() {
    console.log("www123")
  }
}
</script>

<style scoped>
.main {
  height: 100%;
  width: 100%;
  user-select: none;
}

.el-form-item {
  margin-left: 60px;
  margin-right: 35px;
  height: 35px;
}

:deep .el-input {
  width: 300px;
  height: 35px;
}

.rememberMe {
  margin-top: 1px;
}

.card {
  position: absolute;
  left: 52%;
  top: 53%;
  height: 420px;
  margin-left: -330px;
  margin-top: -275px;
  width: 600px;
  box-shadow: 3px 3px 3px 3px;
  padding-bottom: 1px;
  padding-top: 5px;
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 0.8);
}
</style>